<template>
  <div id="app">
    <!-- <div class="banners">



			<div class="heads " style="margin:  0 0 5%;">

				<div class="" style="">
					<img :src="info.picurls" alt="">

				</div>
			</div>
		</div> -->

    <div class="top">
      <div class="detail">
        <img @click="preview1()" class="head" :src="info.photo" alt="">
        <div class="detailInfo">
          <div class="row1">
            <div class="name">{{info.name}}</div>
            <img src="/static/img/sex.png" alt="">
          </div>
          <div class="row2">{{info.id}}号</div>
        </div>
      </div>
      <div class=" userInfo shujus new">
        <div class="a1">
          <div class="b1">
            {{info.huolizhi}}
          </div>
          <div class="b2">
            当前票数
          </div>
        </div>
        <div class="a1">
          <div class="b1">
            {{info.paihang}}
          </div>
          <div class="b2">
            排行榜
          </div>
        </div>
        <div class="a1">
          <div class="b1">
            {{info.sypiaoshu}}
          </div>
          <div class="b2">
            距上一名票数
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="huodong">
      <div class="a1" style="text-align: center;padding-top: 1px;position: relative;padding-bottom: 3%;">
        <img src="/static/image/a2.png" alt="" style="width: 50%;margin: -3px auto 0;">
        <div style="position: absolute;top: 0;width: 100%;text-align: center;color: #ffffff;">{{info.id}} 号
        </div>
      </div>

      <div class="hdxinxi" style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 10px;">
        <div class="hdxinxib1" style="width: 50%;">
          <img :src="info.photo" @click="preview1()" alt="" style="width: 100%;border-radius: 6px;">

        </div>
        <div class="hdxinxib2" style="width: 40%;">
          <div class="hdxinxic1">姓名：</div>
          <div class="hdxinxic2">{{info.name}}</div>
          <div class="hdxinxic1">性别：</div>
          <div class="hdxinxic2">{{info.sex}}</div>
        </div>
      </div>

      <div class="shuju" style="margin: 3% 0;    padding: 4.5% 0;">

        <div class="shujus">
          <div class="a1">
            <div class="b1">
              {{info.huolizhi}}
            </div>
            <div class="b2">
              当前票数
            </div>
          </div>
          <div class="a1">
            <div class="b1">
              {{info.paihang}}
            </div>
            <div class="b2">
              排行榜
            </div>
          </div>
          <div class="a1">
            <div class="b1">
              {{info.sypiaoshu}}
            </div>
            <div class="b2">
              距上一名票数
            </div>
          </div>
        </div>
      </div>
      <div class="gerenxian">
        <div class="xxs"></div>
        <div style="background-color: #ffffff;position: absolute;width: 100%;text-align: center;display: inline-block;width: 40%;left: 30%;top: 25%;">

          <div class="txts">个 人 简 介</div>
        </div>

      </div>
      <div class="gerencons">
        <div class="neirong" v-html="info.content"></div>
        <div class="piclists">
          <ul>
            <li :key="index" @click="preview2(index)" v-for="(img, index) in images">
              <img :src="img" alt="" />
            </li>
          </ul>

        </div>
      </div>
    </div> -->
    <div class="desc">
      <div class="neirong" v-html="info.content"></div>
      <div class="piclists">
        <ul>
          <li :key="index" @click="preview2(index)" v-for="(img, index) in images">
            <img class="decImg" :src="img" alt="" />
          </li>
        </ul>

      </div>
    </div>
    <div style="height: 80px;"></div>
    <div class="footers1">
      <!-- <van-tabbar v-model="footer_a" active-color="#fd5b5a" inactive-color="#000" route  >
		 	      <van-tabbar-item icon="wap-home-o" to="/" >首页</van-tabbar-item>
		 	      <van-tabbar-item icon="like-o" to="/Message">消息</van-tabbar-item>
		 	      <van-tabbar-item icon="description" to="/News">新闻</van-tabbar-item>
		 	      <van-tabbar-item icon="user-o"  to="/Member">我的</van-tabbar-item>
		 	    </van-tabbar> --><!-- $router.push('/') -->
      <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="background-color: black;">
        <!-- <div class="van-tabbar-item " @click="shouye" style="width: 20%;">
          <div class="van-tabbar-item__icon">
            <img src="/static/image/bot1.png" alt="">
          </div>
          <div class="van-tabbar-item__text">首页</div>
        </div>
        <div class="tpss" style="width: 80%;">
          <div class="lianjie" @click="dianzan">
            投火力值
          </div>
          <div class="lianjie" @click="jixus">
            继续助力
          </div>
        </div> -->
        <div class="btn1" @click="dianzan">投火力值</div>
        <div class="back" @click="shouye"> <img src="/static/img/home.png" alt=""> </div>
        <div class="btn2" @click="jixus">继续助力</div>
      </div>
    </div>

    <div v-if="zhe" class="van-overlay" style="z-index: 2001;"></div>
    <div class="tanchuang" style="" v-if="tan1">
      <div class="tanchuang1" style="z-index: 2002;">
        <img src="/static/img/piao1.png" alt="">
        <!-- <div class="txt1">
          <div class="txt3">恭喜投火力值成功</div>
          <div class="txt2">剩余投票次数: {{cishu}}</div>
        </div> -->

        <!-- <div class="close1" @click="close1">
          <img src="/static/image/close1.png" alt="">
        </div> -->
        <div class="closet" @click="close1">
          <van-icon class="closeBtn" name="close" />
        </div>
        <div class="tNum">{{cishu}}</div>
      </div>
    </div>
    <div class="tanchuang new" style="" v-if="tan2">
      <div class="tanchuang2" style="z-index: 2002;">
        <img src="/static/img/piao2.png" alt="">

        <!-- <img @click="jixuzhuli" src="/static/image/tpxq5.png" alt="">
        <img src="/static/image/tpxq4.png" alt=""> -->
        <!-- <div class="close2" @click="close2">
          <img src="/static/image/close1.png" alt="">
        </div> -->
        <div class="closet" @click="close2">
          <van-icon class="closeBtn" name="close" />
        </div>
        <div class="continue" @click="jixuzhuli"></div>
      </div>
    </div>
    <div class="gerenfx" @click="tiao()">
      <img src="/static/image/share.png" alt="">
    </div>
    <div class="gif">
      <van-popup v-model="liwushow1" :style="{ height: '30%' }">
        <img class="giftpics" :src="giftpic" alt="">
      </van-popup>
    </div>

    <div class="liwus">
      <van-popup v-model="liwushow" position="bottom" :style="{ height: '33%' }">
        <div style="background: #222222;min-height: 96%;padding: 2% 3% 6%;position: relative;">
          <div class="head1">
            <div style="color: #eebd73;font-size: 16px;">继续助力</div>
            <div style="color: #d2d2d2;font-size: 14px;">{{info.huolidesc}}</div>
          </div>
          <div style="display: flex;flex-wrap: wrap;margin-top: 4px;padding-bottom: 40px;">
            <div :class="lis.state==1?'liwusss liwusss1':'liwusss'  " v-for="(lis,index) in list" :key="index" @click="select(lis,index)">
              <img style="width: 70%;margin: 0 15%;" :src="lis.picurl" alt="">
              <p v-if="lis.state==2" class="liwusss2">{{lis.title}}</p>
              <p class="liwusss2">{{lis.money}}元</p>
              <p v-if="lis.state==1" class="stepss"><van-stepper v-model="lis.nums" max="99" theme="round" button-size="22" integer /></p>
              <!-- <p v-if="lis.state==1" class="zengsongsss" v-on:click.stop="zsliwus(lis)">赠送</p> -->
            </div>
          </div>
          <div class="zsliwu2">
            <div class="zsliwu1" v-on:click.stop="zsliwus()">赠送礼物</div>
          </div>

        </div>
      </van-popup>
    </div>

    <div id="Loading" v-show="loadings">
      <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div class="mask" v-if="(tan2||tan1)"></div>
  </div>
  <!-- <div id="demoCanvas" ref="demoCanvas"></div> -->

</template>
<style>
.zsliwu2 {
  position: fixed;
  left: 0;
  bottom: 20px;
  width: 100%;
}
.zsliwu1 {
  width: 100px;
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#b2823b),
    to(#f3c278)
  );
  background: linear-gradient(to top, #b2823b, #f3c278);

  border-radius: 15px;
  text-align: center;
  line-height: 30px;
  color: #ffffff;
  font-size: 14px;
  margin: 0 auto;
}
.stepss .van-stepper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.stepss .van-stepper--round .van-stepper__minus {
  color: #b2823b !important;
  background-color: #fff;
  border: 1px solid #b2823b !important;
}
.stepss .van-stepper--round .van-stepper__plus {
  background-color: #b2823b !important;
}
.stepss .van-stepper__minus,
.stepss .van-stepper__plus {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
}
.stepss .van-stepper .van-stepper__input {
  width: 24px !important;
  height: 20px !important;
  max-width: 36px !important;
  color: #b2823b;
}
.gif .van-popup {
  height: auto !important;
  width: 100% !important;
  background: none !important;
}
.gif .van-popup .giftpics {
  width: 100% !important;
  height: auto !important;
}
.liwus .head1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 3%;
}

.liwusss {
  text-align: center;
  width: 22%;
  margin: 4px 1% 4px;
  border: 1px solid #222222;
}

.liwusss1 {
  border: 1px solid #686868;
  border-radius: 12px;
}

.liwusss2 {
  color: #ffffff;
  font-size: 12px;
  padding: 2px 0;
}

.zengsongsss {
  color: #ffffff;
  font-size: 12px;
  background: linear-gradient(to right, #eccc9a, #c2a374);
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  padding: 2px 0;
}

.gerenfx {
  position: fixed;
  bottom: 120px;
  right: 20px;
}

.gerenfx img {
  width: 40px;
  height: 40px;
}

.tanchuang {
  position: fixed;
  top: 20%;
  z-index: 2003;
  width: 100%;
}

.tanchuang1 {
  width: 76%;
  margin: 0 auto;
  position: relative;
  max-width: 560px;
}

.tanchuang1 .txt1 {
  position: absolute;
  top: 20%;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.tanchuang1 .txt3 {
  display: inline-block;
  background: linear-gradient(to top, #6f3707, #ad5c14);
  -webkit-background-clip: text;
  color: transparent;

  font-size: 26px;
}

.tanchuang1 .txt2 {
  width: 100%;
  text-align: center;
  color: #efbe74;
  margin-top: 28%;
}

.tanchuang2 {
  width: 66%;
  margin: 0 auto;
  position: relative;
  max-width: 440px;
}

.tanchuang2 .txt1 {
  position: absolute;
  top: 30%;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  color: #ffffff;
}

.tanchuang2 .txt3 {
  font-size: 22px;
}

.tanchuang2 .txt2 {
  font-size: 14px;
  margin-top: 4%;
}

.tanchuang2 .txt4 {
  font-size: 20px;
  margin-top: 16%;
  color: #000000;
  font-weight: bold;
}

.close1,
.close2 {
  text-align: center;
}

.close1 img {
  width: 40px;
  height: 40px;
  margin: 20px auto;
}

.close2 img {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.van-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

.van-popup--center {
  background: none;
}

.footers1 .van-tabbar {
  width: 92%;
  padding: 0 4%;
  height: 60px;
}

.footers1 .van-tabbar-item__text {
  color: #e4bd83;
}

.footers {
}

.tpss {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tpss .lianjie {
  width: 48%;

  background: linear-gradient(to top, #b2823b, #f3c278);
  margin: 10px 0;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  color: #ffffff;
  font-size: 18px;
}

.van-tabbar-item {
  border: none !important;
}

.neirong {
  font-size: 14px;
  line-height: 28px;
  padding: 10px 0;
}

.gerenxian {
  position: relative;
  margin-top: 5%;
  text-align: center;
  padding: 8% 0;
  margin: 5% 3% 0;
}

.gerenxian .xxs {
  background-color: #f0e0c8;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
}

.gerenxian .txts {
  display: inline-block;
  background: linear-gradient(to top, #f2c177, #b08139);
  -webkit-background-clip: text;
  color: transparent;
  /* // 转变为行内块元素 文字渐变才会生效 */

  font-weight: bold;
  background-color: #ffffff;
  font-size: 18px;
}

.hdxinxic1 {
  color: #898989;
  margin-top: 16%;
}

.hdxinxic2 {
  color: #000000;
  margin-top: 8%;
  font-size: 14px;
}

.shujus .a1 .b2 {
  font-size: 12px;
}

.piclists img {
  width: 100%;
}
</style>
<style scoped>
#app {
  background-color: #262426;
  height: 100vh;
}
.userInfo {
  margin: -8% 5% 0;
  padding: 4% 0;
  background-color: #3b393b;
  border-radius: 15px;
}
.shujus .a1:nth-child(2) {
  border-right: 1px dashed #999;
  border-left: 1px dashed #999;
}
.new .a1 .b1 {
  font-size: 18px;
  color: #fc6e20;
}
.new .a1 .b2 {
  font-size: 12px;
  color: #fff;
}
.top .detail {
  overflow: hidden;
  padding: 2% 3.5% 5%;
  height: 126px;
  /* background-color: #fff; */
  border-radius: 0 0 30px 30px;
  display: flex;
  align-items: center;
  background-image: url("/static/img/bd.png");
  background-size: 100%;
}
.top .detail .head {
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  margin-left: 5%;
}
.top .detail .detailInfo {
  flex: 1;
  margin-left: 5%;
}
.detail .detailInfo .row1 {
  width: 100%;
  display: flex;
  align-items: center;
}
.detailInfo .row1 .name {
  font-size: 18px;
  color: #333;
  margin-right: 1.5%;
  margin-bottom: 2%;
}
.detailInfo .row2 {
  background: linear-gradient(270deg, #ff5179 0%, rgba(255, 81, 121, 0.4) 100%);
  border-radius: 52px 52px 52px 52px;
  width: 55px;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  padding: 5px 0;
  color: #fff;
}
.neirong {
  color: #fff;
  font-size: 17px;
}
.desc {
  margin: 5% 5% 0;
  background-color: #3b393b;
  border-radius: 15px;
  padding: 10px;
}
.piclists {
  padding: 1%;
}
.decImg {
  border-radius: 15px;
}
.van-tabbar--fixed {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.van-tabbar--fixed .btn1,
.van-tabbar--fixed .btn2 {
  flex-shrink: 0;
  width: 30%;
  color: #fc6e20;
  text-align: center;
  font-size: 14px;
  line-height: 32px;
  border-radius: 60px;
  border: 1px #fc6e20 solid;
}
.van-tabbar--fixed .btn2 {
  background: #fc6e20;
  color: #fff;
}
.van-tabbar--fixed .back {
  width: 23vw;
  height: 23vw;
  border-radius: 50%;
  background-color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2%;
}
.back img {
  width: 60%;
  height: 60%;
}
.closet {
  position: absolute;
  top: -20px;
  right: 10px;
}
.closeBtn {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.tNum {
  font-size: 90px;
  font-weight: bold;
  color: #fc6f22;
  transform: rotate(8deg);
  position: absolute;
  top: 35%;
  left: 44%;
}
.new.tanchuang {
  top: 30%;
}
.continue {
  /* background-color: #fff; */
  width: 100%;
  height: 15vw;
  position: absolute;
  bottom: 10px;
}
</style>
<script>
import Vue from 'vue';
import {
  Toast
} from 'vant';
// import SVGA from 'svgaplayerweb';
import {
  Popup
} from 'vant';
import {
  ImagePreview
} from 'vant';
import { Stepper } from 'vant';
import wx from 'weixin-js-sdk';
Vue.use(ImagePreview);
Vue.use(Popup);
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue.use(VueImageSwipe)
Vue.use(Toast);
Vue.use(Stepper);
export default {
  data() {
    return {
      info: [],
      id: '',
      picurllist: '',
      images: [],
      liwushow: false,
      defaultOpt: {
        tapToClose: true, // 点击上层图层关闭预览
        closeEl: false, // 关闭右上角的X图标
        fullscreenEl: true, // 打开右上角的全屏图标
        shareEl: false, // 关闭右上角的分享图标
        arrowEl: true,
        preloaderEl: true,
        loop: false,
        bgOpacity: 0.85,
        showHideOpacity: true,
        errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',

      },
      page: 0, //请求第几页
      total: 0, //总共的数据条数
      show: true,
      imageUrl: '',
      tan1: false,
      zhe: false,
      cishu: 0,
      tan2: false,
      list: [],
      loading: false,
      finished: false,
      loadings: true,
      wechatpayType: '',
      giftpic: 'https://fengchaoyinshilianmeng.oss-cn-beijing.aliyuncs.com/uploads/image/20220908/1662604569_235421.gif',
      liwushow1: false,
      zhifus: true,
      selectliwu: [],
      // 是否在微信
      isWx: false,
    }
  },
  components: {},
  created: function () {

    this.$emit('footer', false);
    //判断是不是微信环境
    let u = navigator.userAgent
    this.isWx = !!u.match(/MicroMessenger/i);//微信
  },

  mounted() {

    this.id = this.$route.query.id;
    this.recordapi();
    this.is_weixn();

  },

  activated() {
    if (this.$route.meta.keepAlive) {
      this.$emit('footer', false);
    }
  },
  metaInfo() {
    const title = '个人详情'
    return {
      title,
      meta: [{
        description: this.info.description
      },
      {
        keywords: this.info.keyword
      },
      ]
    }
  },
  methods: {
    changes(e) {
      console.log(e);
    },
    getShareInfo() {

      // 只需要传地址就好，其他后端都会写好来
      let url = location.href.split('&')[0]
      console.log(url);
      var that = this;
      that.$api.post("/Index/jssdk", { url: url }).then(res => {
        const config = res.data;
        const huodong = res.huodong;
        wx.config({
          appId: config.appId,  // appID 公众号的唯一标识
          timestamp: config.timestamp, // 生成签名的时间戳
          nonceStr: config.nonceStr, //  生成签名的随机串
          signature: config.signature, // 生成的签名
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
          ]
        });
        wx.ready(() => {
          var shareData = {
            title: huodong.title,
            desc: that.info.name,
            link: url,
            imgUrl:
              that.info.photo,
          };
          //点击要去分享
          wx.updateAppMessageShareData(shareData);
          wx.updateTimelineShareData(shareData);

        });
      });
    },
    shouye() {
      location.href = '/'
    },
    jixuzhuli() {
      if (this.isWx) {
        this.$router.push('/download')
      } else {
        this.liwushow = true
        this.tan2 = false
        this.zhe = false
      }
    },
    jixus() {
      if (this.isWx) {
        this.$router.push('/download')
      } else {
        this.liwushow = true
      }
    },
    zsliwus() {
      let selectliwu = this.selectliwu
      console.log(selectliwu)
      if (selectliwu.lenth != 0) {

      } else {
        Toast.fail('请选择礼物');
        return false;
      }
      if (!this.zhifus) {
        return false;
      }
      this.zhifus = false;
      // setTimeout(()=> {
      // // that.liwushow1=false;
      //  this.zhifus=true;
      // }, 2000)

      var that = this
      var userid = that.$cookieStore.getCookie('userid');
      if (!userid) {
        //this.$router.push('Logins')
        this.$router.replace('Logins')
        return false;
      }
      console.log(selectliwu.id)
      this.loadings = true
      that.$api.post("/Index/dianzan", {
        userid: userid,
        id: this.id,
        nums: selectliwu.nums,
        liwuid: selectliwu.id,
        type: 2,
        code: this.getUrlParam("code"),
        zftype: this.wechatpayType
      }).then(res => {

        let liwushow = that.list

        let gifpic = '';
        for (let i = 0; i < liwushow.length; i++) {

          if (selectliwu.id == liwushow[i].id) {
            gifpic = liwushow[i].picurl1;

          }

        }
console.log(222)
console.log(res)
return false;
        if (res.code === 1) {

          if (this.wechatpayType == 1) {
            that.callpay(res, gifpic);
          } else {
            let url = res.data
            window.location.replace(url)
            that.loadings = false;
          }
        } else {
          that.loadings = false
        }
      });
    },
    // 编码函数
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数

      if (r != null) return unescape(r[2]);
      return null; //返回参数值
    },


    getcode() {
      let code = this.getUrlParam("code");
      // 如果不存在code则跳转授权
      if (!code) {
        // 本地路径
        let local = window.location.href;
        // 公众号或测试号appid
        let appid = process.env.AppID;
        //不存在就打开下面的地址进行授权
        window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=` +
          appid +
          `&redirect_uri=${encodeURIComponent(
            local
          )}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`);

      }
    },
    is_weixn() {
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        this.wechatpayType = '1'


      } else {
        this.wechatpayType = '2'
      }
    },
    callpay: function (result, id) {
      let that = this;
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", that.jsApiCall(result), false);
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", that.jsApiCall(result));
          document.attachEvent("onWeixinJSBridgeReady", that.jsApiCall(result));
        }
      } else {
        that.jsApiCall(result, id);
      }
    },
    jsApiCall: function (result, gifpic) {
      let that = this;
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        "appId": result.config.appId, //公众号名称，由商户传入
        "timeStamp": result.config.timestamp, //时间戳，自1970年以来的秒数
        "nonceStr": result.config.nonceStr, //随机串
        "package": result.config.package,
        "signType": result.config.signType, //微信签名方式：
        "paySign": result.config.paySign //微信签名
      },
        function (res) {

          console.log(gifpic);
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            that.loadings = false;
            that.liwushow = false;
            that.liwushow1 = true;
            that.giftpic = gifpic;
            that.$nextTick(function () {
              this.zhifus = true;
            })
            that.recordapi();
            setTimeout(function () {
              that.liwushow1 = false;
              console.log('隐藏')

            }, 5000)

            //Toast.success('支付成功');
            // setTimeout(function() {
            // 	location.href = location;
            // }, 1000);
            // 支付成功可以进行页面跳转
          } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
            that.loadings = false;
            that.$nextTick(function () {
              this.zhifus = true;
            })
            Toast.fail('用户取消支付');

          } else {
            that.$nextTick(function () {
              this.zhifus = true;
            })
            that.loadings = false;
            Toast.fail('支付失败');
          }
        }
      );
    },
    select(item, index) {
      let list = this.list
      for (let i = 0; i < list.length; i++) {
        if (i == index) {
          list[i].state = 1;
          this.selectliwu = list[i];
        } else {
          list[i].state = 2;
        }
      }

      this.list = list
      console.log(this.selectliwu);
    },
    tiao(e) {
      this.$router.push('share?id=' + this.id)
      console.log(e);
    },
    dianzan() {
      var that = this;
      var userid = that.$cookieStore.getCookie('userid');
      if (!userid) {
        //this.$router.push('Logins')
        this.$router.replace('Logins')
        return false;
      }
      that.$api.post("/Index/dianzan", {
        id: this.id,
        userid: userid,
        type: 1,
      }).then(res => {
        that.recordapi();
        if (res.code == 1) {

          if (res.data.sypiaoshu > 0) {
            this.zhe = true
            this.tan1 = true
            this.cishu = res.data.sypiaoshu
          } else {
            this.zhe = true
            this.tan2 = true
          }
          //Toast(res.msg);
        }
      });
    },
    close1() {
      this.zhe = false
      this.tan1 = false
    },
    close2() {
      this.zhe = false
      this.tan2 = false
    },
    preview(index) {
      this.$imagePreview({
        images: this.images,
        index: index,
        defaultOpt: {
          tapToClose: true, // 点击上层图层关闭预览
          fullscreenEl: false, // 关闭右上角的全屏图标
          closeEl: false // 关闭右上角的X图标
        }
      });
    },
    preview1() {
      console.log(this.info.photos);
      ImagePreview(this.info.photos)

    },
    preview2(index) {
      ImagePreview({
        images: this.images,
        startPosition: index,
      })

    },
    initMachineSVGA() {
      var mycanvas = document.getElementById("demoCanvas");
      // 修改容器大小
      mycanvas.style.width = 100 + "px";
      mycanvas.style.height = 100 + "px";

      let player = new SVGA.Player("#demoCanvas");
      let parser = new SVGA.Parser("#demoCanvas");
      // this.imageUrl 定义一个参数接收url
      parser.load(this.imageUrl, function (videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
      });
    },
    recordapi() {
      this.imageUrl = "/static/image/123.svga";
      //this.imageUrl="http://toupiao/uploads/123.svga";
      //this.imageUrl="https://woshimiimage.mvoicer.com/image/item/img/1560828651416.svga";
      //this.initMachineSVGA();
      var that = this;

      //this.id = this.id.replace(/[\s]/g, "+")
      console.log(this.id);
      var userid = that.$cookieStore.getCookie('userid');
      that.$api.post("/Index/usercont", {
        userid: userid,
        id: this.id,
      }).then(res => {
        //this.wechatpayType == 1 && res.info.openidzt == 2 && userid
        if (this.wechatpayType == 1 && userid) {
          this.getcode();
        }
        that.getShareInfo();
        that.info = res.info;
        that.list = res.info.goods;
        that.images = res.info.images
        that.loadings = false
      });
    },

  }
}
</script>
